<template>
    <section class="main" ref="Main">
        <header>
            <a class="logo" href="/"></a>
            <nav>
                <div>
                    <router-link :to="{name:'index'}" active-class="active-class-bg">{{ $t('langObj.home') }}</router-link>                
                    <router-link :to="{name:'education'}" active-class="active-class-bg">{{ $t('langObj.education') }}</router-link>              
                    <router-link :to="{name:'datalab'}" active-class="active-class-bg">{{ $t('langObj.dataSet') }}</router-link>              
                    <router-link :to="{name:'competitions'}" active-class="active-class-bg">{{ $t('langObj.comptition') }}</router-link>
                    <router-link :to="{name:'lighthouse'}" active-class="active-class-bg">{{ $t('langObj.lightHouse') }}</router-link>                 
                    <!-- <a>{{ $t('langObj.about') }}</a> -->
                </div>
            </nav>
            <div class="international">
                <Select v-model="defaultLang" @on-change="changeLanguage">
                    <Option value="ZH">简体中文</Option>
                    <Option value="EN">English</Option>
                </Select>
            </div>
            <div class="login-reg" v-if="!token">
                <span @click="toLogin">{{ $t('langObj.login') }}</span>|<span @click="toRegister">{{ $t('langObj.reg') }}</span>
            </div>
            <div class="setting" v-if="token">
                <Dropdown @on-click="operation">
                    <img class="avator" :src="imageSrc">
                    <span class="user_name">{{ username }}</span>
                    <DropdownMenu slot="list">
                        <DropdownItem name="personal-center">{{ $t('langObj.personal') }}</DropdownItem>
                        <DropdownItem name="account-setting">{{ $t('langObj.account') }}</DropdownItem>
                        <DropdownItem divided name="logout">{{ $t('langObj.logout') }}</DropdownItem>
                </DropdownMenu>
                </Dropdown>
            </div>
        </header>
        <router-view></router-view>
        <router-view name="footer"></router-view>
    </section>
</template>

<script>
import { getToken,removeToken,getLang,setLang } from '../utils/auth'
import { mapActions, mapGetters, mapMutations } from 'vuex';
import { domain } from '../utils/host';
export default {
    inject:['reload'],
    computed: {
        username(){
            return localStorage.getItem('username');
        },
        token(){
            return getToken();
        },
        imageSrc(){
            return `${domain}/fdl/preImages/${this.preImage}`;
        } 
    },
    data(){
        return{
            defaultLang:getLang() || "ZH",
            preImage:localStorage.getItem("header_path"),
        }
    },
    methods: {
        ...mapActions(['Xlogout']),
        toLogin(){
            this.$router.push({name:"login"})
        },
        toRegister(){
            this.$router.push({name:"register"})
        },
        operation(name){
            if(name === 'personal-center'){
                // 当前页面在个人中心时 再次点击个人中心显示账户余额菜单栏高亮
                this.reload();
                this.$router.push({path:'/personal'})
            }else if(name === 'account-setting'){
                this.$router.push({path:'/setting'})
            }else if(name === 'logout'){
                this.Xlogout().then(res => {
                    this.$router.push({path:"/"});
                    // 清空浏览器中Cookies的token
                    removeToken();
                    // 清空浏览器中用户信息存入浏览器localstorage的用户信息
                    localStorage.clear();
                    window.location.reload();
                })
            }
        },
        changeLanguage(value){
            setLang(value)
            window.location.reload()
        }
    },
}
</script>

<style lang="scss" scoped>
    .main{
        min-width: 1350px;
        height: 100%;
        display: flex;
        flex-direction: column;
        
        & > header{
            min-width: 1350px;
            height: 76px;
            font-size: 16px;
            font-weight:bold;
            background:#002F75;
            color:rgba(218,231,247,1);
            padding: 0 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .logo{
                background: url(../assets/images/header-logo.png) ;
                background-size:  185px 36px ;
                background-position: center;
                background-repeat: no-repeat;
                display: inline-block;
                width: 180px;
                height: 76px;
            }

            & > nav{
                flex:1;

                & > div{
                    display: flex;
                    height: 76px;
                    justify-content: center;
                    align-items: center;
                }

                a{
                    display: inline-block;
                    height: 76px;
                    line-height: 76px;
                    margin: 0 10px;
                    padding:0 20px;
                    font-weight: 400;
                    color:rgba(218,231,247,1);

                    &:hover{
                        color:#C2142F !important;
                        border-bottom: 4px solid #C2142F;
                        transition: color .5s ease,border-color .5s ease;
                    }
                }
            }

            .international{
                width: 100px;
                margin-right: 20px;
            }
            .login-reg > span{
                display: inline-block;
                margin: 0 10px;

                &:hover{
                    cursor: pointer;
                    color:#C2142F;
                    transition: color .5s ease;
                }
            }

            .setting{
                .avator{
                    width:30px;
                    height: 30px;
                    border-radius: 50%;
                    vertical-align: middle;
                    cursor: pointer;
                }
                .user_name{
                    cursor: pointer;
                }
            }
        }

    }
</style>
